---
order: 1
title: 资产导入
type: 图形
group: Spine
label: Graphics/2D/Spine/editor
---

本章节为大家介绍如何在 Galacean 编辑器中导入 Spine 动画资产。

> Spine 与引擎版本对应关系详见 ：[版本/性能章节](/docs/graphics/2D/spine/other)

## 1. 从 Spine 编辑器导出资产
第一步，需要从 Spine 编辑器导出你的 Spine 动画素材，你可以在[《Spine用户指南》](https://zh.esotericsoftware.com/spine-user-guide) 中找到完整的步骤, 说明如何：

1. [导出 skeleton 和 animation 数据](https://zh.esotericsoftware.com/spine-export)
2. [导出包含 skeleton 图像的 texture atlases](https://zh.esotericsoftware.com/spine-texture-packer)

下面展示了 spine 导出资产的一个简要流程：

1. 完成动画制作后，单击 `Spine 菜单`>`导出` ，打开导出窗口

<Image src="https://mdn.alipayobjects.com/huamei_irlgws/afts/img/A*AhJWTLotiKUAAAAAAAAAAAAADvX8AQ/original" width="203" alt="Export panel in Spine editor" />

2. 选择导出窗口左上角的**二进制** （ 推荐使用二进制，以二进制格式而不是JSON格式导出，会使文件体积更小，加载更快

<Image src="https://mdn.alipayobjects.com/huamei_irlgws/afts/img/A*SLgpQr7P8FIAAAAAAAAAAAAADvX8AQ/original" width="551" alt="Export window in Spine editor" />

3. 勾选上**纹理图集**的打包复选框

<Image src="https://mdn.alipayobjects.com/huamei_irlgws/afts/img/A*lryOSrLjzEYAAAAAAAAAAAAADvX8AQ/original" width="549" alt="Click packing texture atlas button in Export window" />

4. 点击 **打包设置**

这里的打包设置是指纹理的打包设置，打包配置参数可以参考[官方文档](https://zh.esotericsoftware.com/spine-texture-packer)，完成打包设置后，点击**确定**

<Image src="https://mdn.alipayobjects.com/huamei_kz4wfo/afts/img/A*fpulR7_CCisAAAAAAAAAAAAADsp6AQ/original" width="521" alt="Texture pack window in Spine Editor" />

5. 回到导出窗口，选择导出文件夹后，点击**导出**

<Image src="https://mdn.alipayobjects.com/huamei_irlgws/afts/img/A*Tv0uRpXYT-gAAAAAAAAAAAAADvX8AQ/original" width="519" alt="Click export button in texture pack window" />

6. 上一步导出后，将会得到如下三个文件：

<Image src="https://mdn.alipayobjects.com/huamei_irlgws/afts/img/A*2eL6R51ITuAAAAAAAAAAAAAADvX8AQ/original" width="406" alt="Spine assets in folder" />

- spineboy.skel：包含骨骼结构（skeleton）和动画（animation）数据，是动画动作与骨骼绑定的核心信息。
- spineboy.atlas：存储纹理图集（texture atlas）的信息，包括每张纹理在图集中的位置、大小等细节。
- 纹理图片：可能包含多张图片，每张图片代表纹理图集（atlas）中的一页，用于实际渲染动画角色的视觉内容。

## 2. 在 Galacean 编辑器中导入资产

打开编辑器后，将导出的文件直接拖入到[资产面板](/docs/assets/interface/)中，即可完成上传，如下面的动图所示：

<Image src="https://mdn.alipayobjects.com/huamei_irlgws/afts/img/A*u-FHQYyaXlgAAAAAAAAAAAAADvX8AQ/original" width="992" alt="Drag spine assets into Galacean editor"/>

上传完成后，在资产面板中能够看到上传后的 Spine 资产，包括：<b>SpineSkeletonData 资产</b>，<b>SpineAtlas 资产</b>，以及纹理资产

### SpineSkeletonData 资产

<Image src="https://mdn.alipayobjects.com/huamei_irlgws/afts/img/A*-U5CRKWiRlsAAAAAAAAAAAAADvX8AQ/original" width="110" alt="Spine skeleton data asset icon" />

SpineSkeletonData 资产存储了 skeleton 数据，以及对生成的 SpineAtlas 资产的引用
点击资产后，能够在检查器中预览 Spine 动画，预览面板中能够切换`皮肤`和`动画片段`：

<Image src="https://mdn.alipayobjects.com/huamei_irlgws/afts/img/A*AXsDRognlqMAAAAAAAAAAAAADvX8AQ/original" width="478" alt="Spine skeleton data preview" />

### SpineAtlas 资产

<Image src="https://mdn.alipayobjects.com/huamei_irlgws/afts/img/A*OGNbSaCYQlwAAAAAAAAAAAAADvX8AQ/original" width="108" alt="Spine atlas asset" />

SpineAtlas 资产存储了texture atlas 文件，并包含了其对所需 Texture 资产的引用。
点击资产后，能够在检查器中查看其引用的 Texture 资产，以及 Spine 的图集信息。

<Image src="https://mdn.alipayobjects.com/huamei_irlgws/afts/img/A*-j8aSq7wSVAAAAAAAAAAAAAADvX8AQ/original" width="468" alt="Spine atlas preview" />

### 资产更新
如若需要更新你的 Spine 资产。从 Spine 编辑器中重新导出资产，并再次导入到 Galacean 编辑器中覆盖原有文件即可。


下一章节：[添加与使用](/docs/graphics/2D/spine/add-and-use)